<template>
  <div class="page">
    <div class="page__hd">
      <van-divider
          :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >
        授权登录回调
      </van-divider>
      <p class="page__desc">授权登录回调获取code,通过code获取用户信息,可获取信息后自动跳转</p>
      <p class="page__desc">当前url: {{ url }}</p>
    </div>
    <div class="page__bd page__bd_spacing">
      <div class="weui-flex">
        <div class="weui-flex__item">
          <div class="placeholder">
            <van-button
                type="info"
                size="large"
                class="question-botton" @click="getOauthUser">通过code获取用户
            </van-button>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
/**
 * 1.从vuex导入mapActions处理Actions中的函数
 * 2.如果函数在mutations就从vuex导入mapMutations
 * 3.如果函数在State就从vuex导入mapState
 */
import {mapActions} from 'vuex'
//调用用户api接口
import {oauthUser} from '../api/user'
//从url中获取code
import {queryString} from '../utils/index'

export default {
  name: 'AuthCallback',
  created() {
  },
  computed: {
    //这里只是为了让页面显示当前url，无实际作用
    url() {
      return window.location.href
    }
  },
  methods: {
    // 利用 mapMutations函数，可以直接把vuex中的mutation合并到当前组件的methods中，合并之后，
    // 使用mutation就像使用methods中的方法一样
    ...mapActions('user', ['saveUser']),

    getOauthUser() {
      let params = {'code': queryString('code')}
      oauthUser(params).then((res) => {
        //进行存储
        this.saveUser(res.data)
        this.$router.push("/user");
        alert(JSON.stringify(res))
      });
    }
  },
}
</script>
<style lang="less" scoped>
.page__desc {
  font-size: 15px;
}
</style>
